<template>
	<view >	
	<!-- 顶部选项卡 -->
	 <scroll-view scroll-x :scroll-into-view="scrollInto" scroll-with-animation
	 class="scroll-row border-bottom border-light-secondary" style="height: 101rpx;">
	 	<view v-for="(item,index) in tabBars" :key="index" 
	 	class="scroll-row-item px-3 py-2 font-small" :id="'tab'+index"
	 	:class="tabIndex === index?'text-main font-md font-weight-bold':''"
	 	@click="changeTab(index)">{{item.name}}</view>
	 </scroll-view>
	 
	 <swiper :duration="150" :current="tabIndex" @change="onChangetab"  :style="'height:'+ scrollH+'px;'">
	 	<swiper-item v-for="(item , index) in newslist" :key="index" >
	 		<scroll-view scroll-y="true" :style="'height:'+ scrollH+'px;'" @scrolltolower="loadmore(index)" >
	 			
	 		<template v-if = "item.list.length > 0" >
	 		<block v-for="(item2 , index2) in item.list" :key='index2'>
	 		 <commonList :item="item2" :index="index2"  @follow = "follow" @doSupport="doSupport" ></commonList>
	 		<divider></divider>
	 		</block> 
	 			<!-- 上拉加载 -->
	 	  <load-more :loadmore ="item.loadmore" ></load-more>
	 		 </template>
	 		 
	 		 <template v-else >
	              <no-thing></no-thing>
	 		 </template>	 		 
	 		</scroll-view>				
	 	</swiper-item>
	 </swiper> 			
	</view>
</template>

<script>
	const demo =[{
					  userpic:'/static/default.jpg',
					  username:'昵称',
					  txt_time:'2019-10-20 下午04:30',
					  isFollow:false,
					  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
					  txt_pic:'/static/demo/datapic/11.jpg',
					  support:{
						  type:"support",
						  support_count:1,
						  unsupport_count:2
					  },
					  comment_count:2,
					  share_num:2					 					    	
				},{
					  userpic:'/static/default.jpg',
					  username:'昵称',
					  txt_time:'2019-10-20 下午04:30',
					  isFollow:false,
					  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
					  //txt_pic:'/static/demo/datapic/11.jpg',
					  support:{
						  type:"support",
						  support_count:1,
						  unsupport_count:2
					  },
					  comment_count:2,
					  share_num:2					 					    	
				},{
					  userpic:'/static/default.jpg',
					  username:'昵称',
					  txt_time:'2019-10-20 下午04:30',
					  isFollow:false,
					  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
					  txt_pic:'/static/demo/datapic/11.jpg',
					  support:{
						  type:"unsupport",
						  support_count:1,
						  unsupport_count:2
					  },
					  comment_count:2,
					  share_num:2					    	
				},{
					  userpic:'/static/default.jpg',
					  username:'昵称',
					  txt_time:'2019-10-20 下午04:30',
					  isFollow:false,
					  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
					  txt_pic:'/static/demo/datapic/11.jpg',
					  support:{
						  type:"support",
						  support_count:1,
						  unsupport_count:2
					  },
					  comment_count:2,
					  share_num:2					    	
				  },
				  {
				  	  userpic:'/static/default.jpg',
				  	  username:'昵称',
				  	  txt_time:'2019-10-20 下午04:30',
				  	  isFollow:false,
				  	  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
				  	  txt_pic:'/static/demo/datapic/11.jpg',
				  	  support:{
				  		  type:" ",
				  		  support_count:1,
				  		  unsupport_count:2
				  	  },
				  	  comment_count:2,
				  	  share_num:2					    	
				    }];
	import commonList from "@/components/common/common_list.vue"
	import loadMore from "@/components/common/load_more.vue"
	export default {
		components:{
			commonList,
			loadMore
		},
		data() {
			return {
				//列表高度
				scrollH:600,
				// 顶部选项卡
				scrollInto:"",
				tabIndex:0,
				tabBars: [{
				    name: '关注',
				}, {
				    name: '推荐',
				}, {
				    name: '体育',
				}, {
				    name: '热点',
				}, {
				    name: '财经',
				}, {
				    name: '娱乐',
				}, {
				    name: '军事',
				}, {
				    name: '历史',
				}, {
				    name: '本地',
				}],
				newslist:[ ]
			}
		},
		onLoad() {
		   let res = uni.getSystemInfo({
		   	success:res=>{
		   				//px
		   			 this.scrollH =	res.windowHeight - uni.upx2px(100)
		   			}
		   })
		    //根据选项生成列表
           this.getData()
		},				
		
		methods: {
			//监听按钮点击事件
			onNavigationBarButtonTap(){
				uni.navigateTo({
					url:'../upload/upload'
				})
			},
			//获取数据
			getData(){
				let arr = []
				for(let i = 0 ; i< this.tabBars.length;i++){
					//生成列表模板
					let obj = {
						//1.上拉加载更多  2.加载中。。 3.没有更多了
						loadmore:"上拉加载更多",
						list:[]
					}
					 if (i < 3){
						obj.list = demo
					}
					arr.push(obj)
				}
				  this.newslist = arr
				
			},
			// 切换选项
			changeTab(index){
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index
				// 滚动到指定元素
				this.scrollInto = 'tab'+index
			},
			
			//监听滑动
			onChangetab(e){
				this.changeTab(e.detail.current)
			},
			//确认是否关注
          follow(e){
			// console.log(this.newslist[e].list)
			 // console.log(e)
			  this.newslist[e].list.isFollow = true
			  uni.showModal({ title: '关注成功'}); 
		  },
		  //顶踩操作
		  doSupport(e){
			  //拿到当前对象
			  let item = this.newslist[e.index]
			  let msg = e.type === 'support' ? '顶' : '踩'
			  //判断当前是否已经顶踩
			  if (item.support.type === ''){
				 //item.support.type = e.type
				 item.support[e.type+'_count']++
				 //return; 
			  }
			  /* this.list[e.index].support.type  = e.type
			  this.list[e.index].support[e.type+'_count']++ */
			  //console.log(e.type);
			 //之前顶了
			else if(item.support.type ==='support'&& e.type === 'unsupport' ){
				 //顶-1  
				 item.support.support_count--;
				 //踩+1
				 item.support.unsupport_count++;
			 }else if(item.support.type ==='unsupport' && e.type === 'support'){
				 //之前踩了
				 //顶+1
				 item.support.support_count++;
				 //踩-1
				 item.support.unsupport_count--;
			 }
			 item.support.type = e.type
			 uni.showToast({ title: msg + '成功'  });			
		  },
		  //上拉加载更多
		  loadmore(index){			 
		  			   //先拿到当前列表
		  			   let item = this.newslist[index]
		  			   if (item.loadmore !== '上拉加载更多') return;
		  			  /* 修改当前列表加载状态 */
		  			  item.loadmore='加载中...'
		  			   setTimeout(() =>{
		  				   //加载数据
		  				   item.list = [...item.list,...item.list]
		  				   //恢复加载状态
		  				  item.loadmore = '上拉加载更多'
		  			   },2000)
		  }
	   }
	}
</script>

<style>
	
</style>
